<template>
  <div class="app-container">
    <div class="tab_container">
      <el-tabs v-model="activeTabsName" class="demo-tabs" @tab-click="clickTabs">
        <el-tab-pane
          v-for="tab in tabs"
          :key="tab.name"
          :label="tab.label"
          :name="tab.name"
        >
          <keep-alive>
            <component
              :is="tab.component"
              v-if="activeTabsName === tab.name"
              :commonDataObj="commonDataObj"
              :organizeOptions="organizeOptions"
            ></component>
          </keep-alive>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import { GetOrganizationTreeAll } from "@/api/assetsManage/organization";
import retrunTable from "./components/retrunTable";
import reciveTable from "./components/reciveTable";

const { proxy } = getCurrentInstance();
const activeTabsName = ref("receive");
const { MeasurementUnit, AssetClassification, AssetSources } = proxy.useDict(
  "MeasurementUnit",
  "AssetClassification",
  "AssetSources"
);

//一些通用的数据
const commonDataObj = toRaw({
  MeasurementUnit: MeasurementUnit,
  AssetClassification: AssetClassification,
  AssetSources: AssetSources,
});
//爷孙通讯 provide，孙 const xxx= inject('FatherCommonDataObj') 接收
provide("FatherCommonDataObj", commonDataObj);

const organizeOptions = ref([]); //组织
const tabs = reactive([
  {
    id: 0,
    name: "receive",
    label: t("receiveAndBack.receive"),
    component: markRaw(reciveTable),
  },
  {
    id: 1,
    name: "return",
    label: t("receiveAndBack.back"),
    component: markRaw(retrunTable),
  },
]);

const clickTabs = (tab, tabIndex) => {
  activeTabsName.value = tab.paneName;
};

//获取组织
const queryOrganization = () => {
  GetOrganizationTreeAll("")
    .then((res) => {
      // organizeOptions.value = [res.output]
      organizeOptions.value = res.output;
    })
    .catch((err) => {
      console.log("组织获取失败", err);
    });
};
onMounted(() => {
  queryOrganization();
});
</script>

<style lang="scss" scoped>
.app-container {
  background: #fff;
  .tab_container {
    margin: 0 20px;
    height: 100%;
    width: calc(100% - 40px);
    position: relative;
    .el-tabs {
      height: 100%;
      width: 100%;
      display: flex;
      :deep(.el-tabs__content) {
        flex: 1;
      }
      :deep(.el-tab-pane) {
        height: 100%;
      }
    }
  }
  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
}
</style>
